import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],
    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],
    ['Auto Parts', { key: 'ORD', value: "Chicago O'Hare International Airport" }],
    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],
    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],
    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],
    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],
    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],
    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],
    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],
  ];

  const airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: "Chicago O'Hare International Airport" },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' },
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'dropdown',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};

export default ExampleComponent;
